<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	border: 2px solid black;
	width: 200px;
	height: 200px;
	margin: 200px auto;
	border-radius: 50%;
	perspective: '';
    transition: 5s;
	transform-style: preserve-3d;
	animation: yuan 5s infinite linear alternate;

}

/* #div1:HOVER {
	transform: rotateY(-90deg);
}

#div1:ACTIVE {
	transform: translateX(-500px);
} */
@keyframes yuan{
0%{transform: rotateY(0)  translateX(-200px)  ;}
50%{transform: rotateY(180deg) translateX(0px) ;}
100%{transform: rotateY(360deg) translateX(200px);}
} 
</style>
</head>
<body>
	<div id=div1 onclick="color();"></div>
	<script type="text/javascript">
		function color() {
			var red = Math.floor(Math.random() * 256);
			var green = Math.floor(Math.random() * 256);
			var blue = Math.floor(Math.random() * 256);
			div1.style.backgroundColor = 'rgb(' + red + ',' + green + ','
					+ blue + ')';

		}
	</script>

</body>
</html>